<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .body{
            width: 700px;
            padding: 25px;
            border: solid;
            border-color: red;
            margin: auto;
        }
         #au_form{
            text-align: left;
        }
        #username{
            width: 300px;
            height: 40px;
        }
        #telphone{
             width: 300px;
            height: 40px;
        }
        #password{
             width: 300px;
            height: 40px;
            margin-left: 10px;
        }
        #phach{
             width: 100px;
            height: 40px;
        }
        #register{
             width: 300px;
            height: 40px;
            color: white;
            background-color: blue;
            margin-left: 60px;
            border-radius: 7px;
        }
        #select{
            margin-left: 60px;
        }
        #pic{
            width: 180px;
            height: 40px;
            margin-left: 20px;
        }
        h2{
           margin-left: 100px;
            color: #00a6e6;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
<div class="body">
    <h2>拥有百度，拥有世界</h2>
    <form id="au_form" name="myForm">
        <label for="username" id="u">
            用户名：<input type="text" id="username" name="username" placeholder="请输入用户名" onfocus="onUser()" onblur="vailDataForm()"><span id="user"></span><br>
        </label><br>
        <label for="telphone">
            手机号：<input type="tel" id="telphone" placeholder="请输入手机号码" onfocus="onNum()" onblur="valiDataFrom1()"><span id="num"></span><br>
        </label><br>
        <label for="password">
            密  码：<input type="password" id="password" placeholder="请输入密码" onfocus="onPwd()" onblur="valiDataForm2()"><span id="pwd"></span><br>
        </label><br>
        <label for="phach" id="p">
            验证码：<input type="text" id="phach" placeholder="请输入验证码"><input id="pic" type="button" value="获取验证码" onclick="sendCode()"><span id="code"></span><br>
        </label><br>
        <input type="radio" id="select">阅读并接受<a href="">《百度用户协议》及<a href="">《百度隐私保护声明》<br>
        <input type="submit" value="注册" id="register">
    </form>
</div>

<script>
    function onUser() {
        document.getElementById("user").innerHTML="请输入6-10位字符"
    }
    function onNum() {
        document.getElementById("num").innerHTML="请输入中国大陆手机号码"

    }
    function onPwd() {
        document.getElementById("pwd").innerHTML="请输入6-16位字符"

    }
    function vailDataForm() {
        var x=document.forms["myForm"]["username"].value;
        if (x==null || x==""){
            document.getElementById("user").innerHTML=""
        }
        else if (x.length>=11 || x.length<=6){
            document.getElementById("user").innerHTML="请按照要求输入"
        }
        else {
            var pSpan = document.getElementById("user");
            var oImg = document.createElement("img");
            oImg.src = "ok_small.png";
            document.getElementById("user").innerHTML="";
            pSpan.appendChild(oImg);

        }

    }
    function valiDataFrom1() {
         var y=document.forms["myForm"]["telphone"].value;
         var numphone=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (y==null || y==""){
            document.getElementById("num").innerHTML=""
        }
        else if (!numphone.test(y)){
            document.getElementById("num").innerHTML="请按照要求输入"
        }
        else {
            var pSpan = document.getElementById("num");
            var oImg = document.createElement("img");
            oImg.src = "ok_small.png";
            document.getElementById("num").innerHTML="";
            pSpan.appendChild(oImg);

        }

    }
    function valiDataForm2() {
        var z=document.forms["myForm"]["password"].value;
        if (z==null || z==""){
            document.getElementById("pwd").innerHTML=""
        }
        else if (z.length>=17 || z.length<=5){
            document.getElementById("pwd").innerHTML="请按照要求输入"
        }
        else {
            var pSpan = document.getElementById("pwd");
            var oImg = document.createElement("img");
            oImg.src = "ok_small.png";
            document.getElementById("pwd").innerHTML="";
            pSpan.appendChild(oImg);

        }

    }
    function sendCode() {
        document.getElementById("code").innerHTML=""
        var pSpan = document.getElementById("code");
        var oImg = document.createElement("img");
        oImg.src = "ok_small.png";
        pSpan.appendChild(oImg);
    }
</script>
</body>
</html>
